var LoginView = function(){
	
	this.environmentSelect = $("#environment");
	this.loginForm = $("#login");
	this.username = this.loginForm.find('input[name="username"]');
	this.password = this.loginForm.find('input[name="password"]');
	this.loginButton = this.loginForm.find('input[type="submit"]');
	this.loginLabel = this.loginForm.find('label');
	
	this.setEnvironments = function(environmentsArray){
		thisView.environmentSelect.empty();
		for(var i = 0; i < environmentsArray.length; i++){
			thisView.environmentSelect.append('<option value="'+ i + '">' + environmentsArray[i] +'</option>');
		};
	};
	
	this.loginForm.submit(function(){
		
		if(isLoginMode()){
		
			if(thisView.username.val() && thisView.password.val()){
				thisView.onLogin();
			}
			else{
				alert("Username or password is empty!");
				thisView.username.focus();
			}
		}
		else{
			thisView.onLogOut();
		}
		return false;
	});
	
	this.setLoggedIn = function(user){
		thisView.loginButton.attr("value", 'Logout');
		thisView.loginButton.attr("disabled", false);
		setLoginText("Access keys: [" + user.accessKey + ", " + user.accessSecret + "]");
	};
	
	this.setLoggedOut = function(){
		thisView.loginButton.attr("value", 'Login');
		setInputsEnabled(true);
		setLoginText("");
		thisView.username.focus();
	};
	
	this.onLogin = new Subscribable(function(){
		setInputsEnabled(false);
		thisView.loginButton.attr("value", 'sending...');
		
		var username = thisView.username.get(0).value;
		var password = thisView.password.get(0).value;
		var selectedEnv = thisView.environmentSelect.get(0).selectedIndex;
		return {'username': username, 'password': password, 'environment':selectedEnv};
	});
	
	this.onLogginError = function(status, response) {
		alert("HTTP " + status + " - " + response);
		setLoggedOut();
	};
	
	this.onLogOut = new Subscribable(function(){
		thisView.setLoggedOut();
	});
	
	var thisView = this;
	
	var setInputsEnabled = function(value){
		thisView.loginButton.attr("disabled", !value);
		thisView.environmentSelect.attr("disabled", !value);
		thisView.username.attr("disabled", !value);
		thisView.password.attr("disabled", !value);
	};
	
	var setLoginText = function(text){
		thisView.loginLabel.empty();
		thisView.loginLabel.append(text);
	};
	
	var isLoginMode = function(){
		return (thisView.loginButton.attr("value") == "Login");
	};
};
//-------------------------------------------------------------------------------------------------------------------------------

var ApiServiceView = function(){
	
	this.apiServiceForm = $("#apiService");
	this.apiSelect = $("#api");
	this.serviceSelect = $("#service");
	this.apiServiceButton = this.apiServiceForm.find('input[type="submit"]');
	
	this.enable = function(value){
		thisView.apiSelect.attr("disabled", !value);
		thisView.serviceSelect.attr("disabled", !value);
		thisView.apiServiceButton.attr("disabled", !value);
	};
	
	this.setApis = function(apisArray){
		thisView.apiSelect.empty();
		for(var i = 0; i < apisArray.length; i++){
			thisView.apiSelect.append('<option value="'+ i + '">' + apisArray[i] +'</option>');
		};
	};
	
	this.setServices = function(servicesArray){
		thisView.serviceSelect.empty();
		for(var i = 0; i < servicesArray.length; i++){
			thisView.serviceSelect.append('<option value="'+ i + '">' + servicesArray[i] +'</option>');
		};
	};
	
	this.apiSelect.change(function(){
		thisView.onApiSelected();
	});
	
	this.serviceSelect.change(function(){
		thisView.onServiceSelected();
	});
	
	this.onApiSelected = new Subscribable(function(){
		return thisView.apiSelect.get(0).selectedIndex;
	});
	
	this.onServiceSelected = new Subscribable(function(){
		var apiIndex = thisView.apiSelect.get(0).selectedIndex;
		var serviceIndex = thisView.serviceSelect.get(0).selectedIndex;
		return {'apiIndex': apiIndex, 'serviceIndex': serviceIndex};
	});
	
	var thisView = this;
};
//------------------------------------------------------------------------------------------------------
var RequestView = function(){
	
	this.requestForm = $("#request");
	this.requestLabel = this.requestForm.find('label');
	this.fieldsDiv = $("#fields");
	this.requestButton = this.requestForm.find('input[type="submit"]');
	this.responseDiv = $("#response");
	this.responseArea = $("#responseArea");
	
	this.enable = function(value){
		if(value){
			thisView.requestForm.show();
		}
		else{
			thisView.requestForm.hide();
		}
	};
	
	this.setLabel = function(service){
		thisView.requestLabel.text(service.verb + "  " + service.path);
	};
	
	this.setFields = function(fieldsArray){
		thisView.fieldsDiv.empty();
		thisView._fields = new Array();
		for(var i = 0; i < fieldsArray.length; i++){
			var name = fieldsArray[i].name;
			var type = "text";
			if(fieldsArray[i].isFile){
				type = "file";
			}
			thisView.fieldsDiv.append('<div id="'+ name + 'Field">' + name + ' : <input type="' + type + '" size="60" id="' + name + '"/></div>');
			var field = new Object();
			field.name = name;
			field.div = thisView.fieldsDiv.find('#' + name + 'Field');
			field.input = thisView.fieldsDiv.find('input[id="' + name + '"]');
			if(name == "length"){
				name = "lengthField";
			}
			thisView._fields[name] = field;
			
			setNullCheckbox(name, field);
		};
		if(fieldsArray.length > 0){
			thisView._fields[fieldsArray[0].name].input.focus();
		}
	};
	
	var setNullCheckbox = function(name, field){
		field.div.append(' <input type="checkbox" id="' + name + 'Checkbox" value="null" /> null');
		field.checkbox = field.div.find('input[id="' + name + 'Checkbox"]');
		field.checkbox.change(function(){
			var checked = (this.checked);
			thisView.setFieldNull(checked, this.name);
		});
		field.checkbox.attr("name", name);
	};
	
	var getField = function(name){
		var fieldName = name;
		if(name == "length"){
			fieldName = "lengthField";
		};
		return thisView._fields[fieldName];
	};
	
	this.setFieldNull = function(value, fieldName){
		var field = getField(fieldName);
		if(value){
			field.input.attr("value", "");
			field.input.attr("disabled", true);
			field.checkbox.attr("checked", "checked");
			if(field.select){
				field.select.attr("disabled", true);
			}
		}
		else{
			field.input.attr("disabled", false);
			field.checkbox.removeAttr("checked");
			if(field.select){
				field.select.attr("disabled", false);
			}
			field.input.focus();
		}
	};
	
	this.setEnumValues = function(name, values){
		addEnumSelect(name, values);
		var field = getField(name);
		field.select.change(function(){
			var id = this.value;
			thisView.enumSelectChange(id, this.name);
		});
	};
	
	var addEnumSelect = function(name, values){
		var field = getField(name);
		field.div.append('  <select id="' + field.name + 'Select"></select>');
		field.select = field.div.find('#' + field.name + 'Select');
		var select = field.select.get(0);
		for(var j = 0; j < values.length; j++){
			select.options[j] = new Option(values[j].name, values[j].id);
		}
		field.select.attr("name", field.name);
	};
	
	this.setListEnumValues = function(name, values){
		addEnumSelect(name, values);
		var field = getField(name);
		field.select.change(function(){
			var id = this.value;
			thisView.listEnumSelectChange(id, this.name);
		});
	};
	
	this.setFieldType = function(name, type){
		var field = getField(name);
		field.div.prepend('<b>' + type + '</b> ');
	};
	
	this.setFieldValue = function(name, value){
		var field = getField(name);
		if(field){
			field.input.val(value);
			thisView.setFieldNull(false, name);
		}
	};
	
	this.enumSelectChange = function(id, name){
		var field = getField(name);
		field.input.val(id);
	};
	
	this.listEnumSelectChange = function(id, fieldName){
		var field = getField(name);
		var value = field.input.val();
		value += ", " + id;
		if(value.charAt(0) == ','){
			value = value.substring(2, value.length);
		}
		field.input.val(value);
	};
	
	this.setFileEvents = function(name){
		var field = getField(name);
		field.input.change(function(){
			var file = this.files[0];
			thisView.setFieldValue("lengthField", file.size);
			thisView.setFieldValue("fileName", file.name);
		});
	};
	
	this.setMultipart = function(verb, path){
		thisView.requestForm.attr("enctype", "multipart/form-data");
		thisView.requestForm.attr("method", verb);
		thisView.requestForm.attr("action", path);
		thisView.requestForm.attr("target", "_blank");
		
		thisView._isMultipart = true;
	};
	
	this.requestForm.submit(function(){
		thisView.onSendRequest();
		if(!thisView._isMultipart){
			thisView._isMultipart = false;
			return false;
		};
	});
	
	this.onSendRequest = new Subscribable(function(){
		var parameters = {};
		for(fieldName in thisView._fields){
			var field = thisView._fields[fieldName];
			if(!field.checkbox.attr("checked")){
				field.input.attr("name", field.name);
				parameters[fieldName] = field.input.val();
			}
		}
		return parameters;
	});
	
	this.setResponse = function(response){
		thisView.responseArea.empty();
		thisView.responseArea.append(response);
	};
	
	var thisView = this;
};